﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>山东电子商务公共服务平台大数据中心</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">

    <style>
        .t_title{
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 2.5em;
            line-height: 80px;
            color: #fff;
        }
        #chart_map{
            cursor: pointer;
        }
        .t_show{
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 2px;
            background: #2C58A6;
            padding: 2px 5px;
            color: #fff;
            cursor: pointer;
        }
	.linshi_zdy{
	    position: absolute;
	    right: 0px;
	    top: 450px;
	}
	.linshi_zdy li{
	    width: 150px;
	    font-size: 16px;
	    padding: 3px 8px;
	    cursor: pointer;
	}
	.linshi_zdy span{
	    display: block;
	    width: 14px;
	    height: 14px;
	    float: left;
	    border-radius: 50%;
	    margin-top: 3px;
	    margin-right: 5px;
	}
	.linshi_zdy li:first-child{
	    color: #ff0000;
	}
	.linshi_zdy li:first-child span{
	    background: #ff0000;
	}
	.linshi_zdy li:nth-child(2){
	    color: #9cff00;
	}
	.linshi_zdy li:nth-child(2) span{
	    background: #9cff00;
	}
	.linshi_zdy li:nth-child(3){
	    color: #fff;
	}
	.linshi_zdy li:nth-child(3) span{
	    background: #fff;
	}
	.linshi_zdy li:nth-child(4){
	    color: #f4a100;
	}
	.linshi_zdy li:nth-child(4) span{
	    background: #f4a100;
	}
	</style>
</head>
<body>

<!--header-->
<div class="header">
    <div class="bg_header">
        <div class="header_nav fl t_title">山东电子商务公共服务平台大数据中心 </div> 
    </div>
</div>

<!--main-->
<div class="data_content">
    <!-- <div class="data_time">
        温馨提示: 点击模块后跳转至详情页面。        
    </div> -->

    <div class="data_main">
        <div class="main_left fl">
            <div class="left_1 t_btn6" style="cursor: pointer;">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                    <!--右下边框-->
                    <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title">
                    <img src="picture/t_1.png" alt="">全区快递企业月寄递量</div>
                <!-- 饼状图 ,data-format格式化显示文本-->
                <div class="chart loadItem" data-url="data/kuaidijisong_area.json" data-type="pie" data-color='["#f845f1","#ad46f3","#5045f6","#4777f5","#44aff0","#45dbf7","#f6d54a","#f69846","#ad46f3","#32C12E","#90F5AA","#F46852","#eaf048","#9ff048","#FF4949","#FFA74D"]'
                	data-legend-style="y:10%,circle,color:#fff," data-showtext="tooltip:{a} <br/>{b} : {c}万件,label:{b}{c}万件"  shieldSettings="{series:[{radius : '45%',center: ['60%', '65%']}]}"
                	style="width:100%;height: 280px;"></div>
            </div>
            <div class="left_2" style="cursor: pointer;">
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                    <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title">
                    <img src="picture/t_2.png" alt="">电子商务销售额、订单数</div>
                <!-- 折线图,data-style="nospace nosplity"左右无空白，y轴分隔线不显示data-axis-color坐标轴的颜色及轴线颜色 -->
                <div class="chart t_btn9 loadItem" data-url="data/xiaoshoudingdan.json" data-type="line" data-color='["#FF4949","#FFA74D","#FFEA51","#4BF0FF","#44AFF0","#4E82FF","#584BFF","#BE4DFF","#F845F1"]'
                	data-grid-style="35%,,," data-legend-style="  ,color:white,top:8%" data-style="nospace nosplity" data-axis-color="#fff,line:#fff" 
                	style="width:100%;height: 280px;"></div>
            </div>
        </div>
        <div class="main_center fl">
            <div class="center_text" style="position: relative;">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                 <!--右下边框-->
                 <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title" style="width: 230px;"><img src="picture/t_3.png" alt="">山东电子商务进农村</div>
               	<!--  地图 map_shandong data-pointer="#F62157,max:30" 定义点的颜色大小 data-topdata="5" 显示前5-->
                <div class="loadItem" data-url="data/mapdata.json" data-type="extend" data-extendfn="map_extend" data-tooltip-suffix="人" 
                	data-pointer="#F62157,max:30" data-topdata="5" 
                	style="width:100%;height:610px;"></div>
                <div class="linshi_zdy">
                    <ul>
                        <li><span></span>2015批(8个)</li>
                        <li><span></span>2016批(15个)</li>
                        <li><span></span>2017批(13个)</li>
                        <li><span></span>2018批(11个)</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="main_right fr">
            <div class="right_1">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                    <!--右下边框-->
                    <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title" style="width:220px;">
                    <img src="picture/t_4.png" alt="">全区快递月寄递数量</div>
                <!-- 折线图 -->
                <div class="echart t_btn7 loadItem" data-url="data/kuaidijisong.json" data-type="line" data-color='["#FF4949","#FFA74D","#FFEA51","#4BF0FF","#44AFF0","#4E82FF","#584BFF","#BE4DFF","#F845F1"]'
                	data-grid-style="35%,,," data-legend-style="  ,color:white,top:8%" data-style="nospace nosplity" data-axis-color="#fff,line:#fff" 
                	style="width:100%;height: 280px;"></div>
            </div>
            <div class="right_2">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                    <!--右下边框-->
                    <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div> 
                <div class="main_title" style="width:200px;">
                    <img src="picture/t_5.png" alt="">电商企业入驻情况</div>
                <!-- <div id="chart_4" class="echart fl t_btn4" style="width:100%;height: 280px;cursor: pointer;"></div> -->
                <!-- 柱状图,data-item-color每个柱子的颜色，逗号表示依次取色，interval: 100000间隔 -->
                <div class="echart fl t_btn4 loadItem" data-url="data/ruzhu.json" data-type="bar" data-item-color="#6bc0fb,#7fec9d,#fedd8b,#ffa597,#84e4dd,#6bc0fb"
                	data-bar-width="40%" data-style="topvalue " shieldSettings="{xAxis:{axisLabel:{interval:0}},yAxis:{interval: 100000}}" data-axis-color="#fff"
                	style="width:100%;height: 280px;cursor: pointer;"></div>
            </div>
        </div>
    </div>
    <div class="data_bottom">
        <div class="bottom_1 fl t_btn5" style="cursor: pointer;">
            <div class="t_line_box">
                <i class="t_l_line"></i> 
                <i class="l_t_line"></i> 
            </div> 
            <div class="t_line_box">
                <i class="t_r_line"></i> 
                <i class="r_t_line"></i> 
            </div> 
            <div class="t_line_box">
                <i class="l_b_line"></i> 
                <i class="b_l_line"></i> 
            </div> 
                <div class="t_line_box">
                <i class="r_b_line"></i> 
                <i class="b_r_line"></i> 
            </div>
            <div class="main_title">
                <img src="picture/t_7.png" alt="">农村电商交易概况</div>
            <!-- 表格数据 -->
            <div class="main_table t_btn8 loadItem" data-url="data/list_jygk.json" data-type="list" ></div>
        </div>
        <div class="bottom_center fl">
            <div class="bottom_2 fl">
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                    <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div>
                <div class="main_title" style="width:300px;left:40%;">
                    <img src="picture/t_7.png" alt="">山东电子商务热销产品排行榜</div>
                 <!-- 表格数据 -->
                <div class="main_table t_btn8 loadItem" data-url="data/list_rexiao.json" data-type="list" ></div>
            </div>
            <div class="bottom_3 fl">
                <div class="t_line_box">
                    <i class="t_l_line"></i> 
                    <i class="l_t_line"></i> 
                </div> 
                <div class="t_line_box">
                    <i class="t_r_line"></i> 
                    <i class="r_t_line"></i> 
                </div> 
                <div class="t_line_box">
                    <i class="l_b_line"></i> 
                    <i class="b_l_line"></i> 
                </div> 
                    <div class="t_line_box">
                    <i class="r_b_line"></i> 
                    <i class="b_r_line"></i> 
                </div>
                <div class="main_title" style="width:260px;left:45%;">
                    <img src="picture/t_7.png" alt="">电子商务热销店铺排行榜</div>
                 <!-- 表格数据 -->
                <div class="main_table t_btn2 loadItem" data-url="data/list_rexiaodianpu.json" data-type="list"></div>
            </div>
        </div>
        <div class="bottom_4 fr">
            <div class="t_line_box">
                <i class="t_l_line"></i> 
                <i class="l_t_line"></i> 
            </div> 
            <div class="t_line_box">
                <i class="t_r_line"></i> 
                <i class="r_t_line"></i> 
            </div> 
            <div class="t_line_box">
                <i class="l_b_line"></i> 
                <i class="b_l_line"></i> 
            </div> 
                <div class="t_line_box">
                <i class="r_b_line"></i> 
                <i class="b_r_line"></i> 
            </div>
            <div class="main_title">
                <img src="picture/t_7.png" alt="">平台活动案例 </div>
             <!-- 表格数据,data-links链接 -->
            <div class="main_table t_btn3 table_zdy loadItem" data-url="data/list_huodong.json" data-type="list" data-links="0"></div>
        </div>
    </div>
</div>
	<script type="text/javascript" src="../../js/jquery-2.2.1.min.js"></script>
	<script type="text/javascript" src="../../js/echarts.min.js"></script>
	<script type="text/javascript" src="../../js/point_util.js"></script>
	<!-- 依赖原数据插件 -->
	<script type="text/javascript" src="../../../webjars/shieldjs/depends/jquery.metadata.js"></script>
	<script type="text/javascript" src="../../../webjars/shieldjs/core/shield.util.js"></script>
	<!-- 处理 -->
	<script type="text/javascript" src="../../js/charts.deal.pie.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.bar.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.line.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.map.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.list.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.count.js"></script>
	<script type="text/javascript" src="../../js/charts.base.js"></script>
	<script type="text/javascript" src="../../js/charts.deal.extend.js"></script>
	<script type="text/javascript" src="js/charts.deal.extend.js"></script>
	<script type="text/javascript" src="../../js/charts.tool.js"></script>
	
</body>

</html>